<template>
  <el-form
      ref="waterManFormRef"
      :model="waterManForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
  >
    <el-form-item label="送水工名称" prop="name">
      <el-input v-model="waterManForm.name" placeholder="送水工名称" />
    </el-form-item>
    <el-form-item label="送水工底薪" prop="basicSalary">
      <el-input v-model="waterManForm.basicSalary" placeholder="送水工底薪" />
    </el-form-item>
    <el-form-item label="送水工提成" prop="deduct">
      <el-input v-model="waterManForm.deduct" placeholder="送水工提成" />
    </el-form-item>
    <el-form-item required label="送水工照片">
      <el-upload
          list-type="picture"
          action=""
          accept=".jpg, .png"
          :limit="1"
          :auto-upload="false"
          :on-change="getFile"
      >
        <el-button type="primary">选择图片上传</el-button>
      </el-upload>&nbsp;&nbsp;
      <el-image v-if="waterManForm.id!=null" :src="waterManForm.image" style="width: 100px;height: 100px"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">
        提交
      </el-button>
      <el-button @click="query">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue";
import request from "@/api/request";
import {ElMessage} from "element-plus";
import router from "@/router";

const getBase64 = (file) => {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    let imgResult = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
}
const waterManFormRef = ref(null);
const waterManForm = reactive({
  id:null,
  name:null,
  basicSalary:null,
  deduct:null,
  image:null
})
const rules = reactive({
  name: [
    {required: true, message: '请输入送水工名称', trigger: 'blur'}
  ],
  basicSalary: [
    {required: true, message: '请输入送水工底薪', trigger: 'blur'}
  ],
  deduct: [
    {required: true, message: '请输入送水工提成', trigger: 'blur'}
  ]
})
const submitForm = () => {
  if(waterManForm.id===null) {
    waterManFormRef.value.validate((valid, fields) => {
      if (valid) {
        request.post('/watermans/addwaterman', waterManForm).then(resp => {
          if (resp.code === 20000) {
            ElMessage.success(resp.data);
            router.replace('/waterMan');
          } else {
            ElMessage.error(resp.data);
          }
        })
      }
    })
  }else{
    waterManFormRef.value.validate((valid, fields) => {
      if (valid) {
        request.put('/watermans/updwaterman', waterManForm).then(resp => {
          if (resp.code === 20000) {
            ElMessage.success(resp.data);
            router.replace('/waterMan');
          } else {
            ElMessage.error(resp.data);
          }
        })
      }
    })
  }
}
const query = () => {
  router.replace('/waterMan');
}
const getFile = (file) => {
  getBase64(file.raw).then(resp=>{
    waterManForm.image = resp;
  })
}

onMounted(()=>{
  if(localStorage.getItem("waterManId")!=0) {
    request.get('/watermans/getwatermanbyid/' + localStorage.getItem("waterManId")).then(resp => {
      if(resp){
        waterManForm.id = resp.data.id;
        waterManForm.name = resp.data.name;
        waterManForm.basicSalary = resp.data.basicSalary;
        waterManForm.deduct = resp.data.deduct;
        waterManForm.image = resp.data.image;
      }
    })
  }
})
</script>